<template>
  <div class="search_id">
    <div class="title"><span>人事看板</span></div>
    <div style="overflow: auto">
      <!-- <div> -->
      <el-row>
        <el-col :span="12" class="tu">
          <el-card class="box-card">
            <div class="text item">
              <div
                id="manuChart"
                :style="{ width: '100%', height: '230px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div id="pie1">
              <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
              <div
                id="main1"
                style="float: left; width: 100%; height: 250px"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="tu">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h3>部门人数</h3></span>
            </div>
            <div class="text item">
              <div
                ref="chart"
                :style="{ width: '100%', height: '190px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="tu">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><h3>离职人数</h3></span>
            </div>
            <div class="text item">
              <div
                ref="chart1"
                :style="{ width: '100%', height: '190px' }"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入基本模板
let Echarts = require("echarts"); // require("echarts/lib/echarts");
require("echarts/lib/chart/bar"); // 引入柱状图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie"); // 引入饼状图组件
// 引入提示框和title组件
require("echarts/lib/component/tooltip"); // tooltip组件
require("echarts/lib/component/title"); //  title组件
require("echarts/lib/component/legend"); // legend组件

export default {
  name: "Kanban",
  data() {
    return {
      chart: null, //部门人数看板
      data: [8, 10, 4, 12],
      chart1: null, //离职人数看板
    };
  },
  created() {
    //页面打开就执
    this.leaveKanban(); //离职看板
    const date = new Date(),
      year = date.getFullYear(),
      month = date.getMonth() + 1,
      myDate = date.getDate();
    (this.today = `${year}/${month < 10 ? "0" + month : month}/${
      myDate < 10 ? "0" + myDate : myDate
    }`),
      console.log(date);
    this.leaveKanban(this.today); //刷新离职看板
    this.initSetTimeout(this.today); //调用每隔10秒刷新数据
  },
  mounted() {
    this.init(); //部门人数【柱形图】
    this.leaveKanban(); //离职看板【折线图】
    this.initData(); //工龄看板【饼状图】
    this.createdManuChart(); //员工年龄【水平柱状图】
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
    window.addEventListener("resize", () => {
      this.chart1.resize();
    });
  },
  methods: {
    //定时刷新
    initSetTimeout(today) {
      setInterval(() => {
        this.leaveKanban(today); //离职看那
        console.log("已刷新");
      }, 10000);
    },
    //部门人数看板【垂直柱状图】
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        xAxis: {
          type: "category",
          data: ["财务部", "人事部", "市场部", "运营组"],
          name: "部门", // x轴名称
          // x轴名称样式
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        }, //X轴
        yAxis: {
          type: "value",
          name: "部门人数", // y轴名称
          // y轴名称样式
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
        }, //Y轴
        tooltip: {
          trigger: "item", // axis   item   none三个值
        },
        series: [{ data: this.data, type: "bar" }], //配置项
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
    //离职人数看板【折线图】
    leaveKanban() {
      this.axios.get("KanbanAPI/GetLeaveKanban").then((res) => {
        console.log(res.data.body);
        //2.初始化
        this.chart1 = Echarts.init(this.$refs.chart1);
        //3.配置数据
        let option1 = {
          xAxis: {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            name: "月份", // x轴名称
            // x轴名称样式
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18,
            },
          }, //X轴
          yAxis: {
            type: "value",
            name: "离职人数", // y轴名称
            // y轴名称样式
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18,
            },
          }, //Y轴
          tooltip: {
            trigger: "axis", // axis   item   none三个值
          },
          series: [
            {
              name: "离职人数",
              data: res.data.body,
              type: "line",
            },
          ], //配置项
        };
        // 4.传入数据
        this.chart1.setOption(option1);
      });
    },
    //工龄比【饼状图】
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById("main1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "工龄比", //主标题
          //subtext: '纯属虚构',//副标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: ["1~3年", "4-6年", "7-9年", "10年以上"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 1548, name: "1~3年" },
              { value: 310, name: "4-6年" },
              { value: 234, name: "7-9年" },
              { value: 335, name: "10年以上" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    //员工年龄【水平柱形图】
    createdManuChart() {
      let manuChart = Echarts.init(document.getElementById("manuChart"));
      let option = {
        title: {
          text: "员工年龄", //主标题
          //subtext: '纯属虚构',//副标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ["18-24岁", "25-29岁", "30-39岁", "40-49岁", "50岁以上"],
        },
        series: [
          {
            type: "bar",
            barWidth: 20,
            data: [40, 20, 27, 10, 3],
            label: {
              show: true,
              formatter: "{c}%", //显示数据带上百分比
              position: "right",
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#5470c6",
                    "#91cc75",
                    "#fac858",
                    "#ee6666",
                    "#73c0de",
                    "#3ba272",
                    "#fc8452",
                    "#9a60b4",
                    "#ea7ccc",
                  ];
                  var index = params.dataIndex % colorList.length;
                  return colorList[index];
                },
              },
            },
          },
        ],
      };
      manuChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 52px;
  background-color: #f3f3f3;
}
.title span {
  float: left;
  padding-top: 15px;
  color: #999999;
  margin-left: -80px;
}
</style>